<template>
  <div class="financialInfo">
  	<div class="content">
					<div class="area">
						<div class="public">
							<ul>
								<li>
									<dl>
										<dt>财务类型</dt>
										<dd style="border:0;padding:5px 0 0 2px;">
											<!-- <input name="" v-model="accountData.accountType" type="text" /> -->
											  <el-radio v-model="accountData.accountType" label="1">个人</el-radio>
  											<el-radio v-model="accountData.accountType" label="2">企业</el-radio>
										</dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt v-if="accountData.accountType==1">收款人</dt>
										<dt v-if="accountData.accountType==2">公司收款</dt>
										<dd><input name="" v-model="accountData.accountName" type="text"/></dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt v-if="accountData.accountType==1">身份证号</dt>
										<dt v-if="accountData.accountType==2">营业执照号</dt>
										<dd><input name="" v-model="accountData.accountCard" type="text"/></dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt v-if="accountData.accountType==1">身份证正面</dt>
										<dt v-if="accountData.accountType==2">营业执照</dt>
										<dd style="border:none; height:auto;">
                      <div class="imgBox" v-if="accountData.accountCardPathFront">
                        <span style="white-space:pre">  </span><img  :src="accountData.accountCardPathFront" >   
                      </div>
											<a href="javascript:;" style="position:relative" :class="{add:accountData.accountCardPathFront}"> 
                        <span v-if="accountData.accountCardPathFront">+重选</span>
                        <span v-if="!accountData.accountCardPathFront">+上传</span>
												<input type="file" @change="onFileChange_Front" accept="image/*" style="position:absolute;left:-50px;width:78px;height:78px;opacity:0">
											</a>
										</dd>
									</dl>
								</li>
								<li>
									<dl> 
										<dt v-if="accountData.accountType==1">身份证反面</dt>
										<dt v-if="accountData.accountType==2">开户许可证</dt>
										<dd style="border:none; height:auto;">
                      <div class="imgBox" v-if="accountData.accountCardPathBack" >
                        <span style="white-space:pre">  </span><img :src="accountData.accountCardPathBack" >   
                      </div>										
                      <a href="javascript:;" style="position:relative"  :class="{add:accountData.accountCardPathBack}">
                        <span v-if="accountData.accountCardPathBack">+重选</span>
                        <span v-if="!accountData.accountCardPathBack">+上传</span>
											  <input type="file" @change="onFileChange_Back" style="position:absolute;left:-50px;width:78px;height:78px;opacity:0">
											</a>
											
										</dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>开户银行</dt>
										<dd><input name="" v-model="accountData.bankName" type="text" /></dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>支行名称</dt>
										<dd><input name="" v-model="accountData.bankSubName" type="text" /></dd>
									</dl>
								</li>	
								<li>
									<dl>
										<dt>开户名</dt>
										<dd><input name="" v-model="accountData.bankUserName" type="text" /></dd>
									</dl>
								</li>
								<li>
									<dl>
										<dt>帐号</dt>
										<dd><input name="" v-model="accountData.bankNo" type="text" /></dd>
										<input name="" v-show="false" v-model="accountData.id"/>
									</dl>
								</li>	
								<li>
									<dl>
										<dt>手机验证码</dt>
										<dd><input name="" v-model="iponeCode" type="text"/></dd>
									</dl>
									<a href="javascript:;" v-if="!isgetSmsCode" @click="sendCode" class="btn_send_info">发送验证码</a>
									<a href="javascript:;" v-if="isgetSmsCode" style="color:#666" class="btn_send_info">{{countDown}}秒后重试</a>
								</li>																																														
							</ul>
							<a href="javascript:;" @click="accountUpdate" class="btn_org_info">保存设置</a>
						</div>
					</div>
				</div>  
  </div>
</template>
<script>
import commonJs from "@/common/js/common";
export default {
  name: "financialInfo",
  data() {
    return {
      accountData: {},
      iponeCode: "",
      isgetSmsCode: false,
      countDown: 60,
      timer: null
    };
  },
  mounted() {
    this.devId = localStorage.getItem("devId");
    this.token = localStorage.getItem("token");
    this.accountInfo();
  },
  methods: {
    // 财务信息查询
    accountInfo() {
      this.$http({
        method: "POST",
        url: commonJs.BASE_URL + "/accountInfo/load.do",
        data: `devId=${this.devId}&token=${this.token}`
      })
        .then(res => {
          if (res.data.code == 0) {
            this.accountData = res.data.data;
          } else {
            this.$message({
              type: "warning",
              message: res.data.message
            });
          }
        })
        .catch(error => {
          this.$message({
            type: "warning",
            message: "网络错误，请稍后再试!"
          });
        });
    },

    //上传图片（正面）
    onFileChange_Front(e) {
      // let name = e.target.name;
      let file = e.target.files[0];
      let filesize = file.size / 1024;
      let data = new FileReader();
      let img = new Image();
      let formatdata = "";
      data.onload = e1 => {
        img.onload = e => {
          // console.log("压缩前大小" + commonJs.dataURLtoBlob(e1.target.result).size / 1024); //压缩前大小
          if (/^image\/([a-zA-Z]|\*)+$/.test(file.type)) {
            formatdata = encodeURIComponent(commonJs.scaleimg(e));
            // console.log(formatdata);
            this.$http({
              headers: { "Content-Type": "application/x-www-form-urlencoded" },
              method: "POST",
              url: commonJs.BASE_URL + "/file/upload.do",
              data: `file=${formatdata}&token=${this.token}`
            }).then(res => {
              if (res.data.code == 0) {
                this.accountData.accountCardPathFront = res.data.data;
              }
            });
          }
        };
        img.src = e1.target.result; //触发加载img load事件
      };
      data.readAsDataURL(file);
    },

    //上传图片（反面）
    onFileChange_Back(e) {
      // let name = e.target.name;
      let file = e.target.files[0];
      let filesize = file.size / 1024;
      let data = new FileReader();
      let img = new Image();
      let formatdata = "";
      data.onload = e1 => {
        img.onload = e => {
          // console.log("压缩前大小" + commonJs.dataURLtoBlob(e1.target.result).size / 1024); //压缩前大小
          if (/^image\/([a-zA-Z]|\*)+$/.test(file.type)) {
            formatdata = encodeURIComponent(commonJs.scaleimg(e));
            // console.log(formatdata);
            this.$http({
              headers: { "Content-Type": "application/x-www-form-urlencoded" },
              method: "POST",
              url: commonJs.BASE_URL + "/file/upload.do",
              data: `file=${formatdata}&token=${this.token}`
            }).then(res => {
              if (res.data.code == 0) {
                this.accountData.accountCardPathBack = res.data.data;
              }
            });
          }
        };
        img.src = e1.target.result; //触发加载img load事件
      };
      data.readAsDataURL(file);
    },

    //保存更新
    accountUpdate() {
      if (!this.iponeCode) {
        this.$message({
          type: "warning",
          message: "手机验证码不能为空"
        });
        return;
      }
      this.$http({
        method: "POST",
        url: commonJs.BASE_URL + "/accountInfo/update.do",
        data: `devId=${this.devId}&token=${this.token}&id=${
          this.accountData.id
        }&accountId=${this.accountData.accountId}&accountType=${
          this.accountData.accountType
        }&accountName=${this.accountData.accountName}&accountCard=${
          this.accountData.accountCard
        }&accountCardPathFront=${
          this.accountData.accountCardPathFront
        }&accountCardPathBack=${
          this.accountData.accountCardPathBack
        }&bankName=${this.accountData.bankName}&bankSubName=${
          this.accountData.bankSubName
        }&bankNo=${this.accountData.bankNo}&smsCode=${
          this.iponeCode
        }&bankUserName=${this.accountData.bankUserName}`
      })
        .then(res => {
          if (res.data.code == 0) {
            this.accountInfo();
            this.$message({
              message: res.data.message,
              type: "success"
            });
          } else {
            this.$message({
              message: res.data.message,
              type: "warning"
            });
          }
        })
        .catch(error => {
          this.$message({
            type: "warning",
            message: "网络错误，请稍后再试!"
          });
        });
    },
    //发送验证码
    sendCode() {
      this.$http({
        method: "POST",
        url: commonJs.BASE_URL + "/smscode/verify.do",
        data: `mobile=${this.accountData.mobile}`
      }).then(res => {
        if (res.data.code == 0) {
          this.isgetSmsCode = true;
          this.$message({
            type: "success",
            message: res.data.message
          });
          if (!this.timer) {
            this.timer = setInterval(() => {
              if (this.countDown > 0) {
                this.isgetSmsCode = true;
                this.countDown--;
              } else {
                this.isgetSmsCode = false;
                this.countDown = 60;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          }
        } else {
          this.$message({
            type: "warning",
            message: res.data.message
          });
        }
      });
    }
  }
};
</script>
<style scoped>
.financialInfo {
  height: 100%;
  margin-bottom: 50px;
}
.main .content {
  width: 80%;
  margin: 20px auto;
}
.area {
  border: 1px solid #ebebeb;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
}
.area dd .imgBox {
  width: 200px;
  height: 80px;
  background: #666;
  position: absolute;
  left: 85px;
}
.imgBox img {
  width: 100%;
  height: 100%;
}
.area dd .add {
  position: relative;
  left: 210px;
}
.public {
  width: 500px;
  margin: 10px auto;
}
.public ul {
}
.public ul li {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  border: none;
  position: relative;
}
.public ul li dl {
  position: relative;
}
.public ul li dl dt {
  position: absolute;
  top: 6px;
  left: 0px;
  width: 74px;
  text-align: right;
}
.public ul li dl dd {
  height: 30px;
  margin-left: 86px;
  border: 1px solid #cccccc;
}
.public ul li dl dd input {
  height: 30px;
  line-height: 30px;
  width: 90%;
  border: none;
  background: none;
  margin-left: 50px;
  outline: none;
}
.public ul li dl dd a:link,
.public ul li dl dd a:visited {
  margin-left: 0px;
  width: 76px;
  height: 76px;
  border: 1px dashed #bbb;
  display: block;
  line-height: 76px;
  text-align: center;
  color: #666;
}
.public a {
  margin-left: 86px;
}
.public a:link.btn_send_info,
.public a:visited.btn_send_info {
  position: absolute;
  top: -35px;
  right: -100px;
  margin-left: 0;
  color: #2aa1f2;
  font-size: 15px;
}
.financialInfo .btn_org_info {
  display: inline-block;
  padding: 0px 10px;
  height: 28px;
  line-height: 28px;
  color: #fff;
  text-align: center;
  border: 1px solid #fa8b00;
  background: #fa8b00;
  font-size: 14px;
  margin-top: 0;
}
</style>
